<template>
  <list-page-container :page-title="pageTitle">
    <!--指明要插入query插槽-->
    <template slot="query">
      <div class="query-content-container flex-column full-container">
        <div class="query-form-container flex-row">
          <div class="form-container">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
                     label-width="68px">
              <el-form-item label="" prop="projectName">
                <el-input
                  v-model="queryParams.farmerName"
                  placeholder="请输入农户名称"
                  clearable
                  @keyup.enter.native="getListData"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="">
                <el-button class="diy-bt" size="mini" @click="getListData">查 询</el-button>
              </el-form-item>
              <el-form-item label="" prop="">
                <el-button class="diy-bt" size="mini" @click="resetQuery">重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="handle-container flex-row">
          <el-button class="diy-bt" size="mini" @click="addData">新 增</el-button>
          <el-button class="diy-bt" size="mini" @click="exportData">导 出</el-button>
        </div>
      </div>
    </template>
    <!--指明要插入body插槽-->
    <template slot="body">
      <el-table
        class="diy-table"
        :data="listData"
        style="width: 100%;" height="100%">
        <el-table-column
          prop="farmerNo"
          label="农户编号">
        </el-table-column>
        <el-table-column
          prop="farmerName"
          label="农户名称">
        </el-table-column>
        <el-table-column
          prop="farmerAge"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="farmerSex"
          label="性别">
          <template slot-scope="scope">
            {{ scope.row.farmerSex == SEX_CONFIG.MAN ? '男' : '女' }}
          </template>
        </el-table-column>

        <el-table-column width="150" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="goInfoPage(scope.row)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
  </list-page-container>
</template>

<script>
import {listPageMixins} from "@/views/business/mixins/listPageMixins";
import {delDept} from "@/api/system/dept";
import {pageBaseMapMixins} from "@/views/business/mixins/pageBaseMapMixins";
import {delFarmer, getAllPlot, getFarmerList} from "@/api/business/userManagement";
import {GEOMETRY_TYPE, SEX_CONFIG} from "@/views/business/constantData";

export default {
  mixins: [listPageMixins, pageBaseMapMixins],
  data() {
    return {
      SEX_CONFIG,
      pageTitle: '农户列表',
      farmerPlotId: 'farmerPlotId',
      plotLayerId: 'plot',
      queryParams: {
        farmerName: ''
      }
    }
  },
  methods: {
    async getListData() {
      let owner = this
      this.removeLayer({layerId: owner.farmerPlotId})
      this.startLoading()
      let farmerRes = await getFarmerList(this.queryParams)
      this.listData = farmerRes.rows

      let plotList = await getAllPlot()
      let {rows} = plotList;
      const geometryType = GEOMETRY_TYPE.POLYGON;
      const txtFileList = [
        {
          value: 'farmerName',
          label: '农户名称',
        },
        {
          value: 'plotNo',
          label: '地块编号',
        },
        {
          value: this.areaFiled,
          label: '面积',
          suffix: ' 亩'
        },
      ]
      let graphicList = _.map(rows, item => {
        let {farmerFarmer: {farmerName, id: farmerId,}, id, plotNo, geoData, geometryArea} = item
        return {attributes: {farmerId, farmerName, id, geometryArea, plotNo}, geoData}
      })
      await this.addLayerByGraphicData({
        layerId: this.farmerPlotId,
        rendererSymbol: {
          type: "simple-fill",
          color: [255, 255, 0, 0.1],
          outline: {
            color: [255, 255, 0, 1],
            width: 2
          }
        },
        graphicList,
        geometryType,
        txtFileList
      })

      this.endLoading()
    },
    initMonitor() {
      this.openMonitor({layerId: this.farmerPlotId, backFun: this.setCurrentFeature})
    },
    setCurrentFeature({point, layer, features}) {
      const popupTitle = '农户信息'
      this.locationByFeatures({layerId: layer.id, features, openPopupFlag: true, popupTitle, point})
    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除?').then(function () {
        return delFarmer({id: row.id});
      }).then(() => {
        this.getListData();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
